<style> 
body{
    background: #f3f1f3;
    color: #333;
}

.userCenter .nav .userImg img{
        width: 100%;
        height: 100%;
        
    } 

    .userCenter .userDesc>div{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        font-size: 12px;
        color: #666;
        margin-top: .5rem;
        width: 80%;
    }
    .userCenter .nav .userCash{
        width:3rem;
        padding: .2rem;
        text-align: center;
        background: #39AC6A;
        color: white;
        border-radius: 1rem;      
    }
    /* 列表样式 */
    .userCenter ul{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .userCenter ul li{
        padding: .5rem;
        background: white;
        margin-top: 1px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .userCenter ul li div{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .userCenter ul li:nth-child(5){
        margin-top: 10px;
    }
    .about{
        margin-top: 10px !important;
    }

@media screen and (min-width: 320px) and (max-width: 359px) {
        /* 头部样式 */
    .userCenter .nav{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 20px 12px;
        margin-bottom: 10px;
        background: white;
    }
    .userCenter .nav .userImg{
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        overflow: hidden;        
    }

    .userCenter .nav .userDesc{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 53%;        
    }
    
    .userCenter ul li img{
        margin-right: .5rem;
        width: 20px;            
    }
    .rightPng{
        width: 8px !important;
        right: 0;
    }
    .userCenter .userDesc>div{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        font-size: 12px;
        color: #666;
        margin-top: .5rem;
        width: 90%;
    }
}
@media screen and (min-width: 360px) and (max-width: 413px) { 
        /* 头部样式 */
    .userCenter .nav{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 20px 12px;
        margin-bottom: 10px;
        background: white;
    }
    .userCenter .nav .userImg{
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        overflow: hidden;        
    }

    .userCenter .nav .userDesc{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 50%;        
    }
    
    .userCenter ul li img{
        margin-right: .5rem;
        width: 20px;            
    }
    .rightPng{
        width: 10px !important;
        right: 0;
    }
}
@media screen and (min-width: 414px) {
        /* 头部样式 */
    .userCenter .nav{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 20px 12px;
        margin-bottom: 10px;
        background: white;
    }
    .userCenter .nav .userImg{
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        overflow: hidden;        
    }

    .userCenter .nav .userDesc{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 50%;        
    }

    .userCenter ul li img{
        margin-right: .5rem;
        width: 24px;            
    }
    .rightPng{
        width: 10px !important;
        right: 0;
    }
}



</style>
<div class="userCenter" data-ng-if="userData">
    <div class="nav">
        <div class="userImg">
            <img ng-src="{{userData.header}}" alt="用户头像">
        </div>
        <div class="userDesc">
            <p class="userName">{{userData.nickname}}</p>
            <div>
                <p class="userInteg">积分：{{userData.integral}}</p>
                <p class="userBalance">余额：{{userData.money||0|currency:"￥"}}</p>
            </div>
        </div>
        <div class="userCash"  ng-click="tixian()">提现</div>
    </div>
    <ul>
        <li ui-sref="userData({id:'userDesc'})">
           <div>
                <img src="../gy/images/icon/data.png" alt=""> 详细资料
           </div>
            <img src="../gy/images/icon/forward.png" alt="" class="rightPng">
        </li>
        <li ui-sref="MsgList({id:'MsgList'})">
            <div>
                <img src="../gy/images/icon/More_Three_Dots.png" alt="">消息列表
            </div>
            <img src="../gy/images/icon/forward.png" alt="" class="rightPng">
        </li>
        <li ui-sref="orderList({id:'orderList'})">
            <div>
                <img src="../gy/images/icon/menu_square_alt.png" alt="">我的订单
            </div>
            <img src="../gy/images/icon/forward.png" alt="" class="rightPng">
        </li>
        <li ui-sref='collect({id:"collect"})'>
            <div>
                <img src="../gy/images/icon/heart_2.png" alt="">我的收藏
            </div>
            <img src="../gy/images/icon/forward.png" alt="" class="rightPng">
        </li>
        <li ui-sref='postHouse'>
            <div>
                <img src="../gy/images/icon/recruit.png" alt="">发布房源
            </div>
            <img src="../gy/images/icon/forward.png" alt="" class="rightPng">
        </li>
        <li ui-sref='feedback({id:"feedback"})'>
            <div>
                <img src="../gy/images/icon/exclamation.png" alt="">意见反馈
            </div>
            <img src="../gy/images/icon/forward.png" alt="" class="rightPng" >
        </li>
        <li ui-sref='about' class="about">
            <div>
                <img src="../gy/images/icon/about.png" alt="">关于我们
            </div>
            <img src="../gy/images/icon/forward.png" alt="" class="rightPng" >
        </li>
    </ul>
</div>